import React from 'react';
import {
	Form,
	Input,
	Button,
	Select,
	Icon,
	DatePicker,
	InputNumber,
	Divider,
	Row,
	Col,
	message,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';

const { Item } = Form;
const { Option } = Select;
const { MonthPicker } = DatePicker;

const labelLayout = {
	labelCol: {
		md: { span: 12 },
		xl: { span: 9 },
	},
	wrapperCol: {
		md: { span: 12 },
		xl: { span: 12 },
	},
};
const btnLayout = {
	wrapperCol: {
		md: { span: 12, offset: 12 },
		xl: { span: 12, offset: 2 },
	},
};

class GraphicForm extends React.PureComponent {
	constructor() {
		super();
		this.state = {
			imgurl: '',
		};
	}
	componentDidMount() {
		const { dispatch, action } = this.props;
		action !== 'post' &&
			dispatch({
				type: 'data/getDetailConstruction',
				payload: {
					id: parseInt(window.location.pathname.split('/')[3]),
				},
			});
	}
	onSubmit = e => {
		e.preventDefault();
		const _this = this;
		const { form, detail, action, dispatch } = _this.props;
		form.validateFields((err, values) => {
			if (!err) {
				values.dataTime = moment(values.dataTime).format('YYYY-MM');
				action === 'post' &&
					dispatch({
						type: 'data/addConstruction',
						payload: { ...values, dataTime: detail.dataTime },
						callback: () => {
							message.success('添加成功!');
							router.push('/data/construction');
						},
					});
				action === 'edit' &&
					dispatch({
						type: 'data/updateConstuction',
						payload: {
							...values,
							id: detail.id,
						},
						callback: () => {
							message.success('更新成功!');
							router.push('/data/construction');
						},
					});
			}
		});
	};
	dateExist = (rule, value, callback) => {
		if (value !== null) {
			this.props.dispatch({
				type: 'data/dateExist',
				payload: { dataTime: moment(value).format('YYYY-MM') },
				callback: data => {
					if (!data.ifExist) {
						callback();
					} else {
						callback('已存在当前时间的数据!请检查!');
					}
				},
			});
		} else {
			callback('时间不能为空!');
		}
	};
	render() {
		const {
			form: { getFieldDecorator },
			action,
			detail,
		} = this.props;
		const { imgurl } = this.state;
		const sector = [
			{ key: 1, title: '党务公开' },
			{ key: 2, title: '党员风采' },
			{ key: 3, title: '社区服务' },
		];
		return (
			<Form onSubmit={this.onSubmit} style={{ margin: '20px 0' }}>
				<Row>
					<Col xl={6} md={12}>
						<Item label="时间" {...labelLayout}>
							{action === 'post' ? (
								<>
									{getFieldDecorator('dataTime', {
										rules: [
											{ required: true, message: '时间不能为空!' },
											{ validator: this.dateExist },
										],
										initialValue:
											action === 'edit'
												? detail && moment(detail.dataTime)
												: null,
									})(<MonthPicker />)}
								</>
							) : (
								<p>{(detail && detail.dataTime) || '/'}</p>
							)}
						</Item>
					</Col>
					<Col xl={6} md={12}>
						<Item label="老年人免费体检人数" {...labelLayout}>
							{action !== 'view' ? (
								<>
									{getFieldDecorator('physicalExamNum', {
										rules: [
											{
												required: true,
												message: '老年人免费体检人数不能为空!',
											},
										],
										initialValue:
											action === 'edit'
												? detail && detail.physicalExamNum
												: '',
									})(<InputNumber min={0} />)}
								</>
							) : (
								<p>{(detail && detail.physicalExamNum) || '0'} 人</p>
							)}
						</Item>
					</Col>
					<Col xl={6} md={12}>
						<Item label="技能培训人数" {...labelLayout}>
							{action !== 'view' ? (
								<>
									{getFieldDecorator('skillsTrainNum', {
										rules: [
											{ required: true, message: '技能培训人数不能为空!' },
										],
										initialValue:
											action === 'edit'
												? detail && detail.skillsTrainNum
												: '',
									})(<InputNumber min={0} />)}
								</>
							) : (
								<p>{(detail && detail.skillsTrainNum) || '0'} 人</p>
							)}
						</Item>
					</Col>
					<Col xl={6} md={12}>
						<Item label="总人数" {...labelLayout}>
							{action !== 'view' ? (
								<>
									{getFieldDecorator('totalPopulationNum', {
										rules: [{ required: true, message: '总人数不能为空!' }],
										initialValue:
											action === 'edit'
												? detail && detail.totalPopulationNum
												: '',
									})(<InputNumber min={0} />)}
								</>
							) : (
								<p>{(detail && detail.totalPopulationNum) || '0'} 人</p>
							)}
						</Item>
					</Col>
				</Row>
				<Row gutter={64}>
					<Col span={12}>
						<Divider style={{ fontSize: 12 }}>人口普查</Divider>
						<Row>
							<Col span={12}>
								<Item label="迁入人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('moveInNum', {
												rules: [
													{
														required: true,
														message: '迁入人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.moveInNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.moveInNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="迁出人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('moveOutNum', {
												rules: [
													{
														required: true,
														message: '迁出人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.moveOutNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.moveOutNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="出生人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('birthNum', {
												rules: [
													{
														required: true,
														message: '出生人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.birthNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.birthNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="死亡人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('deathNum', {
												rules: [
													{
														required: true,
														message: '死亡人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.deathNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.deathNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Divider style={{ fontSize: 12 }}>民政情况</Divider>

						<Row>
							<Col span={12}>
								<Item label="五保户数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('infirmNum', {
												rules: [
													{
														required: true,
														message: '五保户数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.infirmNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.infirmNum) || '0'} 户</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="五保总人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('infirmPeopleNum', {
												rules: [
													{
														required: true,
														message: '五保总人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.infirmPeopleNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.infirmPeopleNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="低保户数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('lowIncomeNum', {
												rules: [
													{
														required: true,
														message: '低保户数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.lowIncomeNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.lowIncomeNum) || '0'} 户</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="低保总人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('lowIncomeResidentsNum', {
												rules: [
													{
														required: true,
														message: '低保总人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.lowIncomeResidentsNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.lowIncomeResidentsNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="优抚对象人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('caressesObjectNum', {
												rules: [
													{
														required: true,
														message: '优抚对象人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.caressesObjectNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.caressesObjectNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="高龄人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('olderNum', {
												rules: [
													{
														required: true,
														message: '高龄人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.olderNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.olderNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
						</Row>
					</Col>
				</Row>

				<Divider style={{ fontSize: 12 }}>残联人口</Divider>
				<Row gutter={64}>
					<Col span={12}>
						<Row>
							<Col span={12}>
								<Item label="多重残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('multipleDisabilityNum', {
												rules: [
													{
														required: true,
														message: '多重残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.multipleDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.multipleDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="听力残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('hearingDisabilityNum', {
												rules: [
													{
														required: true,
														message: '听力残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.hearingDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.hearingDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="视力残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('visualDisabilityNum', {
												rules: [
													{
														required: true,
														message: '视力残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.visualDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.visualDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="智力残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('intelligenceDisabilityNum', {
												rules: [
													{
														required: true,
														message: '智力残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.intelligenceDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>
											{(detail && detail.intelligenceDisabilityNum) || '0'} 人
										</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="精神残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('mentalDisabilityNum', {
												rules: [
													{
														required: true,
														message: '精神残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.mentalDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.mentalDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="肢体残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('extremityDisabilityNum', {
												rules: [
													{
														required: true,
														message: '肢体残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.extremityDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.extremityDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="言语残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('speechDisabilityNum', {
												rules: [
													{
														required: true,
														message: '言语残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.speechDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>{(detail && detail.speechDisabilityNum) || '0'} 人</p>
									)}
								</Item>
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row>
							<Col span={12}>
								<Item label="一级残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('firstLevelDisabilityNum', {
												rules: [
													{
														required: true,
														message: '一级残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.firstLevelDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>
											{(detail && detail.firstLevelDisabilityNum) || '0'} 人
										</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="二级残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('secondLevelDisabilityNum', {
												rules: [
													{
														required: true,
														message: '二级残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.secondLevelDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>
											{(detail && detail.secondLevelDisabilityNum) || '0'} 人
										</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="三级残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('thirdLevelDisabilityNum', {
												rules: [
													{
														required: true,
														message: '三级残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.thirdLevelDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>
											{(detail && detail.thirdLevelDisabilityNum) || '0'} 人
										</p>
									)}
								</Item>
							</Col>
							<Col span={12}>
								<Item label="四级残疾人数" {...labelLayout}>
									{action !== 'view' ? (
										<>
											{getFieldDecorator('fourthLevelDisabilityNum', {
												rules: [
													{
														required: true,
														message: '四级残疾人数不能为空!',
													},
												],
												initialValue:
													action === 'edit'
														? detail && detail.fourthLevelDisabilityNum
														: '',
											})(<InputNumber min={0} />)}
										</>
									) : (
										<p>
											{(detail && detail.fourthLevelDisabilityNum) || '0'} 人
										</p>
									)}
								</Item>
							</Col>
						</Row>
					</Col>
				</Row>
				<Item>
					<div style={{ textAlign: 'center' }}>
						{action !== 'view' && (
							<Button type="primary" style={{ marginRight: 10 }} htmlType="submit">
								{action === 'post' ? '上传' : '更新'}
							</Button>
						)}
						<Button type="danger" onClick={() => router.push('/data/construction')}>
							{action === 'view' ? '返回' : '取消'}
						</Button>
					</div>
				</Item>
			</Form>
		);
	}
}

export default Form.create()(
	connect(state => ({
		detail: state.data.constructionDetail,
	}))(GraphicForm)
);
